<template>
  <header class="brand-header">
    <div class="brand" @click="$router.push('/recommend')" role="button" tabindex="0">
      <img class="brand-logo" src="/logo.png" alt="光影漫荐 Logo" onerror="this.style.display='none'" />
      <span class="brand-title"><slot name="title">光影漫荐</slot></span>
    </div>
    <div class="spacer"></div>
    <slot />
  </header>
</template>

<script>
export default {
  name: 'BrandHeader'
}
</script>

<style scoped>
.brand-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.brand-logo { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; }
.brand-title { font-size: 18px; font-weight: 700; color: #ff4e4e; }
.spacer { flex: 1; }
</style>
